<template>
  <div
    class="career-table"
    v-loading="loading"
    element-loading-text="正在加载数据..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-table
      :data="careerData"
      style="width: 100%"
      :row-style="tableRowStyle"
      :header-cell-style="tableHeaderColor"
    >
      <el-table-column prop="season" label="赛季" width="100">
      </el-table-column>
      <el-table-column prop="league" label="联赛" width="150">
      </el-table-column>
      <el-table-column prop="team" label="球队"> </el-table-column>

      <el-table-column prop="minutes" label="出场时间"> </el-table-column>
      <el-table-column prop="appearance" label="上场/首发"> </el-table-column>
      <el-table-column prop="cards" label="红/黄牌"> </el-table-column>
      <el-table-column prop="role" label="位置"> </el-table-column>
      <el-table-column prop="jerseyNumber" label="球衣号码"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "careerTable",
  props: {
    playerId: {
      type: Number,
    },
  },
  watch: {
    playerId: {
      handler(newPlayerId) {
        this.getCareerData(newPlayerId);
      },
    },
  },
  data() {
    return {
      careerData: [],
      loading: true,
    };
  },
  methods: {
    //设置表头的样式
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return {
        "font-size": "21px",
        "font-weight": "bold",
        color: "black",
        "background-color": "#f1f6f9",
      };
    },
    //设置表格行的样式
    tableRowStyle({ row, rowIndex }) {
      return {
        "text-align": "center",
        "font-size": "18px",
        "font-weight": "bold",
        "background-color": "#f1f6f9",
      };
    },
    //获取当前球员的生涯数据
    async getCareerData(newPlayerId) {
      const { data } = await axios.get(
        `http://8.141.159.127:3000/api/v1/playerfeatures/league/list/${newPlayerId}`
      );
      this.careerData = data;
      this.loading = false;
    },
  },
  created() {
    // this.getCareerData()
  },
};
</script>

<style scoped>
.career-table {
  width: 90%;
  margin: 100px auto 0;
}
.career-table /deep/ .el-table .cell {
  text-align: center;
  /*line-height: 30px;*/
}
</style>
